<template>
  <label class="striking-tool" :for="id">
    <input @change="handleStriking" type="radio" class="striking-tool-radio" name="antzone" :id="id" />
    <ul class="striking-tool-list">
      <li>
        <el-tooltip effect="dark" content="删除" placement="top">
          <el-button size="mini" icon="el-icon-delete" @click.stop="handleDelete()"></el-button>
        </el-tooltip>
      </li>
      <li>
        <el-tooltip effect="dark" content="栅格" placement="top">
          <el-button size="mini" icon="el-icon-files" @click.stop="handleGrid()"></el-button>
        </el-tooltip>
      </li>
      <li>
        <el-tooltip effect="dark" content="锁定" placement="top">
          <el-button size="mini" icon="el-icon-lock" @click.stop="handleLock()"></el-button>
        </el-tooltip>
      </li>
      <li v-if="JSON.stringify(data.components.attribute) !== '{}'">
        <el-tooltip effect="dark" content="设置" placement="top">
          <el-button size="mini" icon="el-icon-setting" @click.stop="handleSetting()"></el-button>
        </el-tooltip>
      </li>
    </ul>
    <div class="striking-tool-body" v-bind:class="{ 'striking-tool-active': JSON.stringify(data.components.attribute) == '{}' }">
      <p class="striking-tool-tips" v-if="JSON.stringify(data.components.attribute) == '{}'"> 拖拽至此处</p>
      <div class="striking-tool-mark"> </div>
      <component :is="data.components.handle" v-model="data.components.attribute" v-if="JSON.stringify(data.components.attribute) !== '{}'" />
    </div>
  </label>
</template>
<script type="text/javascript">
import { mapState, mapMutations, bootstrap } from 'vuecx'
export default {
  components: {
    //empty
  },
  props: {
    value: [Array, Object],
    index: [String, Number]
  },
  data() {
    return {

    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    ...mapState(['config', 'pool']),
    id() {
      return this._uid;
    },
    data: {
      get: function() {
        return this.value[this.index];
      },
      set: function(value) {
        this.$emit('input', value);
      }
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['click_layer', 'set_attributes', 'set_pool']),
    /**
     * 锁定图层
     * @return {[type]} [description]
     */
    handleLock() {

    },
    /**
     * 用户点击事件
     * @param  {[type]} e [description]
     * @return {[type]}   [description]
     */
    handleStriking(e) {
      if (JSON.stringify(this.data.components.attribute) !== '{}') {
        this.handleSetting();
      } else {
        this.handleGrid();
      }
    },
    /**
     * 属性设置
     * @return {[type]} [description]
     */
    handleSetting() {
      let _attribute = this.data.components.components;
      for (let i in _attribute) {
        _attribute[i].attribute = this.data.components.attribute;
      }
      this.set_attributes(_attribute);
    },
    handleDelete() {
      if (JSON.stringify(this.data.components.attribute) == '{}') {
        this.value.splice(this.index, 1);
      } else {
        this.data.components = {
          attribute: {},
          handle: ""
        }
      }
    },
    handleGrid() {
      this.click_layer({
        handle: this.data.handle,
        attribute: this.data.attribute,
      })
    }
  }
}

</script>
<style type="text/css" lang="scss">
.striking-tool {
  display: inline-block;
  width: 100%;
  height: auto;

  position: relative;

  .striking-tool-radio {
    display: none;
  }


  .striking-tool-body {
    width: 100%;
    min-height: 22px;
    position: relative;
  }

  .striking-tool-mark {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0);
  }

  .striking-tool-tips {
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    color: #6082a7;
  }

  .striking-tool-active {
    border: 5px solid #fff;
    background-color: #96bade;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
    background: linear-gradient(45deg,
      rgba(150, 186, 222, .5) 0, rgba(150, 186, 222, .5) 25%, transparent 25%, transparent 50%,
      rgba(150, 186, 222, .5) 50%, rgba(150, 186, 222, .5) 75%, transparent 75%, transparent);
    background-size: 25px 25px;

  }

  .striking-tool-radio:checked~.striking-tool-body {
    border: 1px solid #6082a7;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;

  }

  .striking-tool-radio:checked~.striking-tool-active {
    border: 1px solid #6082a7;
    padding: 4px;
  }

  .striking-tool-radio:checked~.striking-tool-list {
    display: inline-block;
  }

  .striking-tool-list {
    position: absolute;
    right: 0;
    top: -22px;
    height: 22px;
    width: 140px;
    display: none;
    z-index: 999;

    li {
      padding: 0 2px;
      height: 22px;
      float: right;
      list-style-type: none;
      background-color: #358be0;
    }

    .el-button--mini,
    .el-button--mini.is-round {
      padding: 3px;
      font-size: 12px;
      background: none;
      border: none;
      color: #fff;
    }
  }
}

</style>
